<template>
  <view class="btn-box">
    <u-toast ref="uToast"/>
    <button
      class="pms-btn plain"
      @click="handleClick(item.method)"
      v-for="(item, index) in buttonList"
      :key="index"
      :disabled="showLoading"
    >
      {{ item.button }}
    </button>
    <button
      class="pms-btn plain"
      @click="handleClick('doClose')"
    >
      关闭
    </button>
    <!-- 弹框 -->
    <u-popup
      :mask-close-able="false"
      :closeable="false"
      v-model="showPopup"
      @close="handleClose"
      mode="bottom"
      height="670rpx"
    >
      <view class="pop-box">
        <view class="my-form">
          <u-form label-width="160">
            <u-form-item
              :label="nodeTitle"
              required
            >
              <u-input
                v-model="form.nodeName"
                type="select"
                @click="showSelect = true"
                border
              />
            </u-form-item>
            <u-form-item :label="userTitle" required prop="roleName">
              <u-input
                :class="{ 'disabled-select': isDisabled }"
                type="select"
                v-model="form.userName"
                :disabled="isDisabled"
                :placeholder="placeholderPeople"
                @click="handleOpen"
                border
              />
            </u-form-item>
            <u-form-item required label="办理意见">
              <textarea
                v-model="form.remark"
                placeholder="请输入内容"
                border
                class="my-area"
              />
            </u-form-item>
          </u-form>
        </view>
        <view class="btns">
          <button class="pms-btn" plain="true" @click="cancel">
            取消
          </button>
          <button
            class="pms-btn plain"
            plain="false"
            @click="submit"
          >
            提交
          </button>
        </view>
      </view>
        <u-select
            :value-name="'soleId'"
            :label-name="'nodeName'"
            confirm-color="#ca171d"
            style="font-size: 28rpx"
            v-model="showSelect"
            :list="backInfo"
            @confirm="handleConfirm"
        ></u-select>
    </u-popup>
  </view>
</template>

<script>
export default {
  name: "buttonView",
  props: {
      selectUser:{
          type:Object,
          default:()=>({})
      },
      workDetail:{
          type:Object,
          default:()=>({})
      },
      titleList:{
          type:Object,
          default:()=>({})
      },
      reason:{
          type:String,
          default:''
      },
      remark:{
          type:String,
          default:''
      },
      isPageEdit:{
          type:Boolean,
          default:false
      },
      uploadImageList:{
          type:Array,
          default:()=>([])
      },
  },
  watch: {
      selectUser(val) {
          console.log(val)
          this.$set(this.form, "userName", val.name);
          this.$set(this.form, "userId", val.id);
      },
  },
  data() {
    return {
        form:{
            nodeName:'',
            userName:'',
            userId:'',
            remark:''
        },
        showPopup:false,
        nodeTitle:'',
        userTitle:'',
        isDisabled:false,
        buttonList:[
            {
                button:'下一步',
                method:'assign'
            },
            {
                button:'回退',
                method:'doBack'
            }
        ],
        showLoading:false,
        showSelect:false,
        backInfo:[],
        ifNextVal:'',
        finishNode:false, //是否是最后一个节点
        placeholderPeople:'请选择人员'
    };
  },
  methods: {
      submit(){
          console.log('提交',this.form)
          if (this.checkSubmit()) {
            return;
          }
          this.nextBackPageRes();
      },
      checkSubmitEdit(){
          if(this.isPageEdit){
              if(!this.reason){
                  uni.showModal({
                      title: '温馨提示',
                      content: "请选择换签原因",
                      showCancel: false,
                      confirmColor: '#eb4b4b',
                  })
                  return true
              }
              if(!this.remark){
                  uni.showModal({
                      title: '温馨提示',
                      content: "请填写具体情况说明",
                      showCancel: false,
                      confirmColor: '#eb4b4b',
                  })
                  return true
              }
              if(this.uploadImageList.length==0){
                  uni.showModal({
                      title: '温馨提示',
                      content: "请上传图片",
                      showCancel: false,
                      confirmColor: '#eb4b4b',
                  })
                  return true
              }
              return false
          }
          return false
      },
      nextBackPageRes(){
          let params = {}
          if(this.ifNextVal === '0'){
              params={
                  workItemId: this.workDetail.workItemID,
                  userIds: this.form.userId,
                  route:"",
                  wfXpath:[],
                  opinion: this.form.remark,
                  nextSceneId:this.form.sceneId,
                  nodeId:this.form.nodeId,
                  detailId: this.form.detailId,
                  activityDefID: this.workDetail.activityDefID,
                  templateId: this.form.templateId,
              }
          }else if(this.ifNextVal === '1'){
              params={
                  workItemId:this.workDetail.workItemID,
                  opinion: this.form.remark,
                  detailId: this.form.detailId,
                  nextActDefId:this.form.nodeId
              }
          }else if(this.ifNextVal === '2'){
              params={
                  processInstId:this.workDetail.processInstID,
              }
          }else{
            console.log("阻断修复");
          }
          const data = {
              swapLabelFlowId: this.workDetail.bizObject?.bizSeq,
              reason:this.reason,
              remark:this.remark,
              uploadImageList:this.uploadImageList,
              flowFlag: this.ifNextVal,
              swapStatus: this.ifNextVal === '2' ? 'C' : this.form.nodeId,
              wfNextDealParam:params,
          }
          this.$axios.post('/material/api/flows/swapLabelFlow/doNextSwapLabelFLow',data).then(()=>{
              if(this.ifNextVal === '0' && this.form.nodeId === 'finishActivity'){
                  //下一步 并且是结束流程  需要推送资源
                  this.$emit('finishNext')
              }
              this.doClose();
          })
      },
      cancel(){
          this.form = {
              nodeName:'',
              nodeId:'',
              userName:'',
              userId:'',
              remark:''
          }
          this.showPopup=false
      },
      checkSubmit(){
          if (!this.form.nodeName) {
            this.$refs.uToast.show({
              title: "请选择办理节点!",
              type: "error",
              isTab: true,
            });
            return true;
          }
          // 检查是否有选择下一节点办理人
          if (!this.form.userName && !this.finishNode) {
            this.$refs.uToast.show({
              title: "请选择办理人员",
              type: "error",
              isTab: true,
            });
            return true;
          }
          // 检查是否填写了办理意见
          if (!this.form.remark) {
            this.$refs.uToast.show({
              title: "办理意见不能为空！",
              type: "error",
              isTab: true,
            });
            return true;
          }
          return false;
      },
      handleOpen(){
          console.log('选人')
          uni.navigateTo({
              url: `/inspur/changeLabel/components/peopleList?peopleType=1&userId=`+this.form.userId+`&nodeId=`+this.form.nodeId+`&detailId=`+this.form.detailId+`&templateId=`+this.form.templateId+`&processInstId=`+this.workDetail.processInstID,
          });
      },
      handleClick(fn){
          this[fn]()
      },
      doClose(){
        imp.iWindow.close();
        uni.navigateBack({
          delta: 1
        });
      },
      assign(){
          if (this.checkSubmitEdit()) {
              return;
          }
          this.nodeTitle='办理节点';
          this.userTitle='办理人员';
          this.ifNextVal='0';
          this.backInfo = [];
          const data={
              processInstId: this.workDetail?.processInstID,
              actInsetId: this.workDetail?.activityInstID,
              route: ''
          }
          this.$axios.post('/settlement/api/flow/getNextStep',data).then((res)=>{
              res.data.forEach((element, index) => {
                  this.backInfo.push({ ...element, soleId: index });
              });
              this.getFinallyNode(this.backInfo[0])
          })
          this.showPopup=true;
      },
      getFinallyNode(obj){
          this.getUserInfo(obj);
          this.finishNode=obj.finishNode
          const flag=this.workDetail.activityDefID === 'swap_label1' && +this.titleList.fieldProManState === 1
          if(obj.finishNode || flag){
              this.isDisabled = true;
              this.placeholderPeople=''
          }else{
              this.isDisabled = false;
              this.placeholderPeople='请选择人员'
          }
      },
      getUserInfo(item){
          this.form.nodeName = item.nodeName;
          this.form.nodeId = item.nodeId;
          this.form.sceneId = item.sceneId;
          this.form.detailId = item.detailId;
          this.form.finishNode = item.finishNode;
          this.form.templateId = item.templateId;
          const flag=this.workDetail.activityDefID === 'swap_label1' && +this.titleList.fieldProManState === 1
          if(flag){
              this.form.userName =  this.titleList?.fieldProManName+'('+this.titleList?.fieldProManAccount+')';
              this.form.userId =  this.titleList.fieldProManAccount;
          }else{
              this.form.userName = "";
          }
      },
      doBack(){
          let that=this;
          this.backInfo = [];
          const data ={
              processInstId: this.workDetail.processInstID,
              actInsetId: this.workDetail.activityInstID,
              route: '',
              excludeActDefIds: ''
          }
          this.$axios.post('/settlement/api/flow/getBackNextStepPerson',data).then((res)=>{
             if(res.data?.length > 0){
                 this.ifNextVal='1';
                 res.data.forEach((element, index) => {
                     this.backInfo.push({ ...element, soleId: index });
                 });
                 this.nodeTitle = "回退节点";
                 this.userTitle = "回退办理人";
                 this.ifNextVal='1';
                 this.isDisabled = true;
                 this.showPopup=true;
             }else{
                 uni.showModal({
                     title: '温馨提示',
                     content: "请确认是否取消本次换签流程？确定后您申请的换签流程将被取消。",
                     showCancel:true,
                     confirmColor: '#eb4b4b',
                     success: function (res_s) {
                         if (res_s.confirm) {
                             that.ifNextVal='2';
                             that.nextBackPageRes();
                         }else{
                             console.log('啥也不干')
                         }
                     }
                 })
             }
          })
      },
      handleClose() {
          this.$emit("popClose");
      },
      handleConfirm(e){
          let res = this.backInfo.find((item) => item.soleId == e[0].value);
          if(this.isDisabled && this.ifNextVal !== '0'){
              //回退  不用选人
              this.form.nodeName = res.nodeName;
              this.form.nodeId = res.nodeId;
              this.form.userId = res.userId;
              this.form.sceneId = res.sceneId;
              this.form.detailId = res.detailId;
              this.form.finishNode = res.finishNode;
              this.form.templateId = res.templateId;
              this.form.userName = res.userName+'('+res.userId+')';
          }else{
              this.getFinallyNode(res)
          }
      },

  },
};
</script>

<style lang="scss" scoped>
.btn-box {
    position: fixed;
    width: 100vw;
    bottom: 0;
    left:0;
    background-color: #f7f8fa;
    display: flex;
    justify-content: space-evenly;
}
.pms-btn {
  height: 60rpx;
  min-width: 130rpx;
  line-height: 60rpx;
  border-radius: 60rpx;
  color: #ca171d;
  border-color: #ca171d;
  margin: 30rpx 6rpx;
  font-size: 24rpx;
  &.plain {
    color: #fff;
    background: #ca171d;
  }
}
.pop-box {
  padding: 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}
.my-form {
  width: 100%;
  padding: 40rpx 40rpx 20rpx;
}
.my-area {
  border: 2rpx solid rgb(220, 223, 230);
  width: 100% !important;
  border-radius: 8rpx;
  font-size: 28rpx;
  padding: 20rpx;
  height: 150rpx;
  &.red-err {
    border: 2rpx solid #fa3534 !important;
  }
}
.btns {
  display: flex;
  background: #fff;
  font-size: 12rpx;
}
.pms-btn {
  height: 60rpx;
  min-width: 130rpx;
  line-height: 60rpx;
  border-radius: 60rpx;
  color: #ca171d;
  border-color: #ca171d;
  margin: 20rpx 6rpx;
  font-size: 24rpx;
  &.plain {
    color: #fff;
    background: #ca171d;
  }
}
.disabled-select {
  pointer-events: none;
  background: rgba(220, 223, 230, 0.3);
}
::v-deep .u-form-item--left{
    align-items: flex-start !important;
}
</style>
